<template>
  <div class="index-search">
    <CommonNavigatebar />

    <div class="index-search__content">
      <div class="index-search__content-search">
        <CommonSearch
          v-model="searchWord"
          :border="true"
          @search="onManualSearch"
        />
      </div>

      <div class="index-search__content-list">
        <div class="search-list">
          <template v-if="list.length">
            <IndexSearchItem :data="list" @select="onRecomendSelect" />
          </template>
          <template v-else>
            <CommonEmpty />
          </template>
        </div>
      </div>
    </div>

    <div class="index-search__footer"></div>
  </div>
</template>

<script setup lang="ts">
import { apiQueryArticalByName } from "@/apis/knowledge";
import CommonNavigatebar from "@/components/common-navigateBar/index.vue";
import CommonSearch from "@/components/common-search/index.vue";
import CommonEmpty from "@/components/common-empty/index.vue";
import IndexSearchItem from "./components/index-search-item.vue";
import { ACCESS_TOKEN_CODE, ResponseCodeEnum } from "@/constants/index";
import { ref } from "vue";
import Taro, { useLoad } from "@tarojs/taro";
import { useSearchHistory } from "@/hooks/useSearchHistory";
defineOptions({
  name: "index-search",
});

const { insertHistory } = useSearchHistory();
const searchWord = ref("");
const list = ref<any[]>([]);

useLoad((params) => {
  const { text } = params;
  if (text) {
    console.log(decodeURIComponent(text));
    searchWord.value = decodeURIComponent(text);
    onManualSearch();
  }
});

const onRecomendSelect = (id: string) => {
  if (!Taro.getStorageSync(ACCESS_TOKEN_CODE)) {
    Taro.navigateTo({ url: "/packageA/pages/login/index" });
  } else {
    Taro.navigateTo({
      url: `/packageA/pages/knowledge-detail/index?id=${id}`,
    });
  }
};

const onManualSearch = () => {
  const text = searchWord.value;
  insertHistory(text);
  onSearch(text);
};
const onSearch = (text: string) => {
  Taro.showToast({ icon: "loading", title: "搜索中" });
  console.log(text);
  apiQueryArticalByName(text)
    .then((res: any) => {
      const { code, data } = res;
      if (code === ResponseCodeEnum.SUCCESS) {
        list.value = data;
      }
    })
    .finally(() => {
      Taro.hideToast();
    });
};
</script>

<style lang="less">
.index-search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fbfffe;
  // background-image: url("@/assets/index/bg.png");
  // background-repeat: no-repeat;
  // background-size: cover;
  &__content {
    flex: 1;
    width: 100%;
    height: 0;
    padding: 24px;
    box-sizing: border-box;

    width: 100%;
    display: flex;
    flex-direction: column;

    &-search {
      width: 100%;
      padding: 0 0 18px 0;
    }

    &-list {
      width: 100%;
      height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
      .search-history {
        margin-top: 40px;
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        &__header {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span {
            font-weight: 500;
            font-size: 32px;
            color: #000000;
            line-height: 44px;
          }
          image {
            width: 26px;
            height: 25px;
          }
        }
        &__content {
          margin-top: 36px;
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          &-empty {
            width: 100%;
            display: flex;
            justify-content: center;
            font-weight: 400;
            font-size: 28px;
            color: #000000;
            line-height: 40px;
          }
          .history-item {
            background: #ffffff;
            border-radius: 16px;
            border: 2px solid #d6d6d6;
            padding: 4px 16px;

            font-weight: 400;
            font-size: 24px;
            color: #000000;
            line-height: 34px;
          }
        }
      }
      .search-list {
        width: 100%;
        height: 0;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  &__footer {
    height: env(safe-area-inset-bottom);
  }
}
</style>
